<template>
  <div>
    <el-dialog v-model="openDialog" v-if="openDialog" width="45vw" :show-close="false" modal :close-on-click-modal="false" :close-on-press-escape="false">
      <MysqlConnections v-if="connectView" :mysqlConnect="openConnect"    @closeMysqlView="closeConnectView"/>
      <MysqlDatabaseMate v-if="databaseMateView" :mysqlConnect="openConnect" :databaseMeta="databaseMate"  @closeMysqlView="closeDatabaseMateView"/>
    </el-dialog>
  </div>
</template>

<script setup name="MysqlDialogIndex">
import MysqlConnections from "./connectionsView";
import MysqlDatabaseMate from "./databaseMateView";

const {proxy} = getCurrentInstance();
const openDialog = ref(false)
const dialogVisibleData = reactive({
  connectView: false,
  databaseMateView: false,
})
const {
  connectView,
  databaseMateView,
} = toRefs(dialogVisibleData)
const databaseMate = ref(null)
const openConnect = ref(null)


function openDialogView(menu,connectMenu, isOpen, databaseInfo) {
  openConnect.value=null
  databaseMate.value = null
  openConnect.value = connectMenu
  openDialog.value = isOpen;
  if (databaseInfo) {
    databaseMate.value = databaseInfo
  }

  if(menu.id===3||menu.id===4){
    connectView.value = isOpen
  }else if(menu.id===7||menu.id===8){
    databaseMateView.value=isOpen
  }
}

function closeConnectView(val) {
  connectView.value = val
  closeDialog()
}

function closeDatabaseMateView(val) {
  databaseMateView.value = val
  closeDialog()
}

function closeDialog() {
  openDialog.value = false
  proxy.$emit('closeDialogView')
}


defineExpose({openDialogView})
</script>

<style scoped>

</style>
